<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/detail.css">
</head>

<body>
    <!-- 页头 -->
    <header>
        <div class="wrapper">
            <div class="container">
                <section class="logo clearfix">
                    <a href="#">
                        <img src="../img/header-logo.png" alt="" class='clearfix'>
                        <div class="right-r clearfix">
                            <h3>熊猫优选</h3>
                            <div>XIONG&nbsp;MAO&nbsp;YOU&nbsp;XUAN</div>
                        </div>
                    </a>
                </section>
                <section class="search clearfix">
                    <div class="search-wrapper">
                        <input type="text" placeholder="搜索商品，发现更多优惠">
                        <div class="saerchBtn">搜索</div>
                    </div>
                </section>
                <section class="clientPromise clearfix">
                    <ul>
                        <li>
                            <img src="../img/header-clientPromise1.png" alt="">
                            <p>全程包邮</p>
                        </li>
                        <li>
                            <img src="../img/header-clientPromise2.png" alt="">
                            <p>7天退换</p>
                        </li>
                        <li>
                            <img src="../img/header-clientPromise3.png" alt="">
                            <p>品质保证</p>
                        </li>
                    </ul>
                </section>
            </div>
        </div>
    </header>
    <!-- 导航-顶部 -->
    <div id="nav-top">
        <div class="container">
            <ul>
                <li>首页</li>
            </ul>
        </div>
    </div>
    <div id="mainPart"></div>
    <!-- 商品页 -->
    <script type="text/html" id="shoppinginfo">
        <div id="commodity">
            <div class="container">
                <div class="aboutCmd">
                    <div class="cmdInfo">
                        <div class="swiper-container">
                            <div class="show-box">
                                <img src="{{goods.photo[0].url}}" class="showImg" alt="">
                                <div class="mask"></div>
                            </div>
                            <ul class="cmdPicSmall">
                                <li class="active" data-index="0"><img src="{{goods.photo[0].url}}" alt=""></li>
                                <li data-index="1"><img src="{{goods.photo[1].url}}" alt=""></li>
                                <li data-index="2"><img src="{{goods.photo[2].url}}" alt=""></li>
                                <li data-index="3"><img src="{{goods.photo[3].url}}" alt=""></li>
                            </ul>
                        </div>

                        <div class="right">
                            <img src="{{goods.photo[0].url}}" alt="大背景图">
                        </div>
                        <div class="productMsg">
                            <!-- 商品标题 -->
                            <div class="title">
                                <div class="titleIcon">
                                    {{if goods.platform==1}}
                                    <img src="../img/taobao-logo_small.png" alt="">
                                    {{else}}
                                    <img src="../img/mailfee_free.png" alt="">
                                    {{/if}}
                                    <img src="../img/mailfee_free.png" alt="">
                                </div>
                                {{goods.title}}
                            </div>
                            <!-- 商品价格和购买人数 -->
                            <div class="priceAndSalenum">
                                <!-- 价格 -->
                                <div class="price">
                                    <div class="originalPrice">￥{{goods.tbOriginPrice}}</div>
                                    <div class="presentPrice">
                                        券后价：<span class="productPrice"><span class="productPriceTag">￥</span><span
                                                class="productPriceStrong">{{goods.price}}</span><span
                                                class="productPriceDigit"></span></span>
                                        <span class="coupon">{{goods.couponValue}}</span>
                                    </div>
                                </div>
                                <!-- 购买人数 -->
                                <div class="saleNum"> {{goods.saleNum}}人已买</div>
                            </div>
                            <!-- 商品数量 -->
                            <div class="num">
                                <div class="minus">-</div><input type="text" class="amount" value="0">
                                <div class="add">+</div>
                            </div>
                            <!-- 购物车 -->
                            <div class="buyProduct">
                                <button class="addCart" onclick="addCart({{goods}})">加入购物车</button>
                                <button class="buyNow">立即购买</button>
                            </div>
                        </div>

                    </div>
                    <div class="business">
                        <div class="businessTop">
                            <span class="line"></span><span class="businessInfo">卖家信息</span><span class="line"></span>
                        </div>
                        <div class="businessCenter">
                            <img src="{{shangjia.picUrl}}" alt="">
                            <h3>{{shangjia.title}}</h3>

                            <ul class="character">
                                <li>描述</li>
                                <li>服务</li>
                                <li>物流</li>
                            </ul>
                            <ul class="score">
                                <li>{{shangjia.itemScore}}</li>
                                <li>{{shangjia.serviceScore}}</li>
                                <li>{{shangjia.deliveryScore}}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="cmdDetailsPic">
            <div class="cmdDetailsPicContainer">
                <div class="cmdDetails">
                    {{each goods.photo}}
                    <img src="{{$value.url}}" alt="">
                    {{/each}}
                </div>
            </div>
        </div>
    </script>
    <!-- 页尾 -->
    <div id="footer">
        <div class="container">
            <div class="footerTop">
                <div class="footerContent">
                    <img src="../img/header-logo.png" alt="">
                    <div class="footerContentMsg">
                        <h2>熊猫优选</h2>
                        <p>年轻人网购首选</p>
                        <p>购物领券更省钱</p>
                    </div>
                </div>
                <div class="aboutUs">|&emsp;<a data-v-ec21f5b0="" href="#/downLoad" target="_blank"
                        class="item">下载APP</a>
                </div>
            </div>
            <div class="footerBottom">
                <img src="../img/policeIcon.png" alt=""><span>浙公安网备案
                    33010602009949号&emsp;|&emsp;ICP备案号:</span><a
                    href="https://beian.miit.gov.cn/#/Integrated/index"></a>浙ICP备17012864号-1&emsp;|<span>&emsp;<img
                        src="../img/license.png" alt="">证照信息</span>
            </div>
        </div>
    </div>
    <div id="footerLast"><img src="../img/safeWeb.png" alt=""></div>
    <!-- 回到顶部按钮 -->
    <div id="backToTopBtn"><img src="../img/backtotop.png" alt=""></div>
    <!-- 侧栏购物车和我的订单我的主页 -->
    <div id="cartOrderMine">
        <div class="cartIcon">
            <span class="iconfont icon-gouwuche"></span>
        </div>
        <div class="orderIcon">
            <span class="iconfont icon-wodedingdan"></span>
        </div>
        <div class="mineIcon">
            <span class="iconfont icon-wode"></span>
        </div>
    </div>


    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/template-web.js"></script>
    <script src="../js/detail.js"></script>

</body>

</html>